<%-- 
    Document   : altaTienda
    Created on : 02-dic-2013, 19:52:09
    Author     : JR
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<style type="text/css">
.errors {
	background-color:#FFCCCC;
	border:1px solid #CC0000;
	width:400px;
	margin-bottom:8px;
	text-align: center;
}
.errors li{ 
	list-style: none; 
}
#preview-image img{
  width:auto;
  height:150px;
  margin:5px;
}
canvas{
  border:1px solid red;
}
</style>
<!-- CONTENIDO START -->
<div id="contenido">
	<div class="fila">
		<div class="contenido_borde_izq">
			<div class="contenido_borde_der">
				<div class="columna_derecha">
					<h1 class="azul" style="top: 20px; position: absolute;">
						<s:text name="label.tienda.fichaTienda" />
					</h1>
					<s:if test="hasActionErrors()">
						<div class="errors">
							<s:actionerror />
						</div>
					</s:if>

					<s:form action="nuevaAltaTienda" enctype="multipart/form-data">
						<div class="formulario_doble">
							<div class="row">
								<div class="col-lg-6">
									<h3><s:text	name="label.tienda.datosTienda" /></h3>
									<div class="form-group">
										<label for="nombre" class="control-label">
											<s:text	name="label.tienda.nombre" />
										</label>
										<s:textfield id="nombre" placeholder="Nombre"
											name="tiendaBean.nombre" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.nombre" />
									</div>
									<div class="form-group">
										<label for="descripcion" class="control-label">
											<s:text name="label.tienda.descripcion" />
										</label>
										<s:textarea id="descripcion" cssClass="form-control" name="tiendaBean.descripcion" cols="40" rows="10"/>	     
										<s:fielderror fieldName="tiendaBean.descripcion" />
									</div>
									<div class="form-group">
										<label for="tipoVia" class="control-label">
											<s:text name="label.tienda.tipovia" />
										</label>
										<select class="form-control" id="tipoVia" name="tiendaBean.tipoVia">
											<option value="0"><s:text name="label.common.seleccionar" /></option>
											<s:iterator value="listatipovia">
												<option value="<s:property value="id" />">
													<s:property value="nombre" />
												</option>
											</s:iterator>
										</select>
										<s:fielderror fieldName="tiendaBean.tipoVia" />
									</div>
									<div class="form-group">
										<label for="direccion" class="control-label">
											<s:text name="label.tienda.direccion" />
										</label>
										<s:textfield id="direccion" placeholder="Dirección"
											name="tiendaBean.direccion" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.direccion" />
									</div>
									<div class="form-group">
										<label for="codigoPostal" class="control-label">
											<s:text name="label.tienda.codigopostal" />
										</label>
										<s:textfield id="codigoPostal" placeholder="Dirección"
											name="tiendaBean.codigoPostal" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.codigoPostal" />
									</div>
									<div class="form-group">
										<label for="pais" class="control-label">
											<s:text name="label.tienda.pais" />
										</label> 
										<select class="form-control" id="pais" name="tiendaBean.pais">
											<option value="0"><s:text name="label.common.seleccionar" /></option>
											<s:iterator value="listaPaises">
												<option id="<s:property value="id" />"
														value="<s:property value="id" />%%<s:property value="nombre" />">
													<s:property value="nombre" />
												</option>
											</s:iterator>
										</select>
										<s:fielderror fieldName="tiendaBean.pais" />
									</div>
									<div class="form-group">
										<label for="provincia" class="control-label">
											<s:text name="label.tienda.provincia" />
										</label>	
										<select class="form-control" id="provincia" name="tiendaBean.provincia"
											disabled="disabled">
										</select>
										<s:fielderror fieldName="tiendaBean.provincia" />
									</div>
									<div class="form-group">
										<label for="ciudad" class="control-label">
											<s:text name="label.tienda.ciudad" />
										</label>	
										<select class="form-control" id="ciudad" name="tiendaBean.ciudad"
											disabled="disabled">
										</select>
										<s:fielderror fieldName="tiendaBean.ciudad" />
									</div>
									<div class="form-group">
										<label for="web" class="control-label">
											<s:text name="label.tienda.web" />
										</label>
										<s:textfield id="web" placeholder="Dirección Web"
											name="tiendaBean.web" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.web" />
									</div>
									<div class="form-group">
										<label for="telefono" class="control-label">
											<s:text name="label.tienda.telefono" />
										</label>
										<s:textfield id="telefono" placeholder="Teléfono"
											name="tiendaBean.telefono" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.telefono" />
									</div>
									<div class="form-group">
                         				<label for="imagen" class="control-label">
                         					<s:text name="label.tienda.imagen" />
                         				</label>
                         				<div style="display:inline-block">
                         					<input id="imagen" type="file" name="tiendaBean.imagen" style="display:none;"/>
											<div id="adjuntar" class="btn boton_gris">
				                           		<s:text name="label.common.adjuntar" /><span class="icon nuevo"></span>
				                           	</div>
				                           	<div id="preview-image"></div>
				                           	<s:fielderror fieldName="tiendaBean.imagen" />
                         				</div>
				                    </div>
									<div class="form-group">
										<label for="cif" class="control-label">
											<s:text name="label.tienda.cif" />
										</label>
										<s:textfield id="cif" placeholder="CIF"
											name="tiendaBean.cif" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.cif" />
									</div>
									<div class="form-group">
										<label for="premium" class="control-label">
											<s:text name="label.tienda.premium" />
										</label>
										<s:checkbox id="premium" name="tiendaBean.premium"/>
										<s:fielderror fieldName="tiendaBean.premium" />
									</div>								
								</div>
							</div>
							<div class="row">
								<div class="col-lg-6">
									<h3><s:text	name="label.tienda.datosContacto" /></h3>
									<div class="form-group">
										<label for="nombreContacto" class="control-label">
											<s:text	name="label.tienda.contacto.nombre" />
										</label>
										<s:textfield id="nombreContacto" placeholder="Nombre"
											name="tiendaBean.datosContacto.nombre" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.datosContacto.nombre" />
									</div>
									<div class="form-group">
										<label for="apellidosContacto" class="control-label">
											<s:text	name="label.tienda.contacto.apellidos" />
										</label>
										<s:textfield id="apellidosContacto" placeholder="Apellidos"
											name="tiendaBean.datosContacto.apellidos" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.datosContacto.apellidos" />
									</div>
									<div class="form-group">
										<label for="cargoContacto" class="control-label">
											<s:text	name="label.tienda.contacto.cargo" />
										</label>
										<s:textfield id="cargoContacto" placeholder="Cargo"
											name="tiendaBean.datosContacto.cargo" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.datosContacto.cargo" />
									</div>
									<div class="form-group">
										<label for="telefonoContacto" class="control-label">
											<s:text	name="label.tienda.contacto.telefono" />
										</label>
										<s:textfield id="telefonoContacto" placeholder="Teléfono de Contacto"
											name="tiendaBean.datosContacto.telefono" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.datosContacto.telefono" />
									</div>
									<div class="form-group">
										<label for="emailContacto" class="control-label">
											<s:text	name="label.tienda.contacto.email" />
										</label>
										<s:textfield id="emailContacto" placeholder="Email de Contacto"
											name="tiendaBean.datosContacto.email" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.datosContacto.email" />
									</div>
									<div class="form-group">
										<label for="confirmacionContacto" class="control-label">
											<s:text	name="label.tienda.contacto.confirmacion" />
										</label>
										<s:textfield id="confirmacionContacto" placeholder="Confirma Email"
											name="tiendaBean.datosContacto.confirmacion" cssClass="form-control" />
										<s:fielderror fieldName="tiendaBean.datosContacto.confirmacion" />
									</div>
								</div>
							</div>
							<div class="row">            
								<s:submit type="button" cssClass="btn boton_gris" value="%{getText('label.common.siguiente')}"/>
			               </div>
						</div>
					</s:form>
				</div>
			</div>
		</div>
		<div class="contenido_borde_abajo">
			<div class="esquina_izq"></div>
			<div class="esquina_der"></div>
		</div>
	</div>

	<div class="columna_izquierda">
		<div class="pestania">
			<div class="pestania_top"></div>
			<s:a action="GestionAdministrativa" title="Volver" cssClass="azul">
				<span class="bigger"><s:text name="label.common.volver"/></span>
			</s:a>
			<div class="pestania_bottom"></div>
		</div>
	</div>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/livevalidation.js"></script>

<script type="text/javascript">
	$(document).ready(function() {

		$("#pais").change(function(e) {
			cargarProvincias();
		});

		$("#provincia").change(function(e) {
			cargarCiudades();
		});

		habilitarFileUpload();

	});

	function cargarProvincias() {

		$provincia = $('#provincia');
		$ciudad = $('#ciudad');

		$provincia.empty();
		$provincia.prop('disabled', 'disabled');
		$ciudad.empty();
		$ciudad.prop('disabled', 'disabled');

		$index = $("#pais option:selected").attr('id');

		if ($index < 1)
			return;

		$
				.ajax({
					url : 'provinciasJSONData.action?p=' + $index,
					dataType : 'JSON',
					success : function(provincias) {
						$provincia
								.append('<option value="0"><s:text name="label.common.seleccionar" /></option>');
						for ( var k in provincias.data) {
							$provincia
									.append('<option id="'+provincias.data[k].id+'" value="' + provincias.data[k].id + '%%' +provincias.data[k].nombre+'">'
											+ provincias.data[k].nombre
											+ '</option>');
						}
						$provincia.prop('disabled', '');
						$provincia[0].selectedIndex = 0;
						cargarCiudades();
					},
				});
	}

	function cargarCiudades() {

		$ciudad = $('#ciudad');
		$ciudad.empty();
		$ciudad.prop('disabled', 'false');

		$index = $("#provincia option:selected").attr('id');

		if ($index < 1)
			return;

		$.ajax({
			url : 'ciudadesJSONData.action?p=' + $index,
			dataType : 'JSON',
			success : function(ciudades) {
				$ciudad
						.append('<option value="0"><s:text name="label.common.seleccionar" /></option>');
				for ( var k in ciudades.data) {
					$ciudad
							.append('<option id="'+ciudades.data[k].id+'" value="' + ciudades.data[k].id + '%%' +ciudades.data[k].nombre+'">'
									+ ciudades.data[k].nombre
									+ '</option>');
				}
				$ciudad.prop('disabled', '');
				$ciudad[0].selectedIndex = 0;
			},
		});
	}

	/*
	var inputNombre = new LiveValidation('nombre');
	inputNombre.add(Validate.Presence, { failureMessage: "Nombre obligatorio" });

	var inputApellidos = new LiveValidation('apellidos');
	inputApellidos.add(Validate.Presence, { failureMessage: "Apellidos obligatorio" });
	 */

	function habilitarFileUpload() {
		var fileInput = document.getElementById("imagen");
		var fileDiv = document.getElementById("adjuntar");
		console.log(fileInput);
		fileInput.addEventListener("change", function(e) {
			showThumbnail(this.files);
		}, false);

		fileDiv.addEventListener("click", function(e) {
			$(fileInput).show().focus().click().hide();
			e.preventDefault();
		}, false);
	}

	function showThumbnail(files) {

		if (files.length != 1)
			return;

		var file = files[0];

		var thumbnail = $("#preview-image");
		thumbnail.empty();
		
		var imageType = /image.*/;
		if (!file.type.match(imageType)) {
			console.log("Not an Image");
			return;
		}
		var image = document.createElement("img");

		image.file = file;
		thumbnail.append(image);

		var reader = new FileReader();
		reader.onload = (function(aImg) {
			return function(e) {
				aImg.src = e.target.result;
			};
		}(image));
		var ret = reader.readAsDataURL(file);
		/*
		var canvas = document.createElement("canvas");
		ctx = canvas.getContext("2d");
		image.onload= function(){
		  ctx.drawImage(image,100,100);
		};
		*/
	}
</script>
<!-- CONTENIDO END -->